<template>
  <div class="container">
    <div class="visual-header">
      <mu-tabs :value="activeTab" @change="handleTabChange">
        <mu-tab value="tab1" title="当日"/>
        <mu-tab value="tab2" title="当月"/>
        <mu-tab value="tab3" title="全部"/>
      </mu-tabs>
    </div>
    <div class="infinite-container visual-content">
      <div class="bgwhite mt10" v-if="list.length > 0">
        <template v-for="(item, i) in list">
        <mu-flexbox class="trade-box" :key="i">
          <mu-flexbox-item grow="2" >
            <div class="trade-title">
              <span>{{item.patientName}} </span>
              <small class="t3">{{item.itmeName}}</small>
            </div>
            <div class="t3">
              {{item.itmeTime}}
            </div>
          </mu-flexbox-item>
          <mu-flexbox-item class="t5 text-right" v-if="parseFloat(item.itmeAmount) >= 0">
            +{{parseFloat(item.itmeAmount).toFixed(2)}}
          </mu-flexbox-item>
          <mu-flexbox-item class="t1 text-right" v-else>
            {{parseFloat(item.itmeAmount).toFixed(2)}}
          </mu-flexbox-item>
        </mu-flexbox>
        <mu-divider :key="i"/>
        </template>
      </div>
        <div class="not-found" v-else>
        <div>暂无交易记录</div>
      </div>
    </div>
  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
export default {
  data () {
    return {
      activeTab: 'tab1',
      familyPerson: JSON.parse(sessionStorage.person || '{}'),
      list: []
    }
  },
  mounted () {
    this.queryRecord()
  },
  methods: {
    handleTabChange (val) {
      this.activeTab = val
      this.queryRecord(val.replace('tab', ''), 1)
    },
    queryRecord (cycle = 1, pageNo = 1) {
      let params = {
        patientCode: this.familyPerson.id,
        patientIdentityCardType: this.familyPerson.cardtype,
        patientIdentityCardNumber: this.familyPerson.idcard,
        cycle: cycle,
        pageNo: pageNo,
        pageSize: 100
      }
      commonAjax(`${RESTFUL_API.queryRecord}`, params, true).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.data
        }
      })
    }
  }
}
</script>

<style scoped>
.trade-box{
  padding: 1em;
}
.trade-title {
  margin-bottom: 0.6em;
}
</style>
